<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">
      <p class="top-text">充值记录</p>
    </div>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="interval">
        <el-input v-model="selects" placeholder="请输入流水号"></el-input>
      </div>
      <div class="block">
        <el-date-picker
          v-model="timears"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="table-title">
        <div class="table-title-input1">
          <el-input placeholder="请输入内容" v-model="TotalMoney" disabled>
            <template slot="prepend">充值总金额</template>
          </el-input>
        </div>
        <div class="table-title-input1">
          <el-input placeholder="请输入内容" v-model="RechargeMoney" disabled>
            <template slot="prepend">充值手续费</template>
          </el-input>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ border: '0.5px solid #e6e6e6', textColor }"
        :default-sort="{ prop: 'date', order: 'descending' }"
        :header-cell-style="header"
        fit
      >
        <el-table-column
          prop="recharge_type"
          label="充值类型"
          width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span
              :class="['state-color3']"
            >
              {{scope.row.recharge_type}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="top_up_serial_number"
          label="充值流水号"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="merchant_name"
          label="商户名称"
          width="205"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="merchants_pwd"
          label="商户号"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount_before_change"
          label="变动前金额"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="variable_amount"
          label="充值金额"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount_after_change"
          label="变动后金额"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operator"
          label="操作人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column label="充值时间" width="269" align="center">
          <template slot-scope="scope">
            <span> {{ $timer(scope.row.operating_time) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total='count'
      >
      </el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog title="查看充值申请" :visible.sync="dialogVisible" width="30%">
      <div class="popup">
        <div class="top">
          <p class="top-text">平台信息</p>
        </div>
        <el-input placeholder="暂无" readonly v-model="input1.state">
          <template slot="prepend">订单状态:</template>
        </el-input>
        <el-input placeholder="暂无" readonly v-model="input1.amount">
          <template slot="prepend">转账金额:</template>
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      timears: "",
      selects: "",
      TotalMoney: "",
      RechargeMoney: "",
      limit: 10,
      page: 1,
      count:0,
      options: [
        {
          value: "1",
          label: "冲正",
        },
        {
          value: "2",
          label: "退款",
        },
        {
          value: "3",
          label: "代付",
        },
        {
          value: "4",
          label: "扣款",
        },
        {
          value: "5",
          label: "退款",
        },
      ],
      value: "",
      currentPage1: 1,
      dialogVisible: false,
      value1: "",
      value2: "",
      input: "",
      from: {
        name: "123",
      },
      input1: {
        state: "",
        amount: "",
      },
      valll:10
    };
  },
  methods: {
    search() {
      this.$axios({
        url: "/system/user/mm/rechargerecord/selectCzjlByTypeAndTime",
        method: "GET",
        params: {
          first_time: this.timears[0],
          last_time: this.timears[1],
          limit: this.limit,
          page: this.page,
          top_up_serial_number: this.selects,
        },
      })
        .then((response) => {
          console.log(response);
          this.tableData = response.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.valll = val
       this.$axios({
      url: "/system/user/mm/rechargerecord/findczjlAll",
      method: "GET",
      params: {
        limit: this.valll,
        page: this.page,
      },
    })
      .then((response) => {
        this.count = response.data.count
        this.tableData = response.data.data;
      })
      .catch((error) => {
        console.log(123, error);
      });
    },
    handleCurrentChange(val) {
     this.$axios({
      url: "/system/user/mm/rechargerecord/findczjlAll",
      method: "GET",
      params: {
        limit: this.valll,
        page: val,
      },
    })
      .then((response) => {
        this.count = response.data.count
        this.tableData = response.data.data;
      })
      .catch((error) => {
        console.log(123, error);
      });
    },
    textColor({ columnIndex }) {
      console.log(123);
      if (columnIndex === 0) {
        return "color:Lightgreen";
      }
    },
    header() {
      return {
        background: "rgba(242,242,242)",
        border: "0.5px solid #e6e6e6",
      };
    },
  },
  mounted() {
    // 充值总金额请求
    this.$axios({
      url: "/system/user/mm/rechargerecord/selectCzjlAllMoney",
      method: "GET",
    })
      .then((response) => {
        this.TotalMoney = response.data.data;
      })
      .catch((error) => {
        console.log(error);
      });

    // 充值总手续费请求
    this.$axios({
      url: "/system/user/mm/rechargerecord/selectCzjlAllPayment",
      method: "GET",
    })
      .then((response) => {
        this.RechargeMoney = response.data.data;
      })
      .catch((error) => {
        console.log(error);
      });

    // 表格数据
    this.$axios({
      url: "/system/user/mm/rechargerecord/findczjlAll",
      method: "GET",
      params: {
        limit: this.limit,
        page: this.page,
      },
    })
      .then((response) => {
        this.count = response.data.count
        this.tableData = response.data.data;
      })
      .catch((error) => {
        console.log(123, error);
      });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
.bg {
  background: white;
}
.interval {
  margin-right: 15px;
}
// 顶部标题
.top {
  padding: 15px 0;
  border-bottom: 2px solid #f6f6f6;
}
.top-text {
  font-size: 14px;
  padding: 0 15px;
}
// 搜索栏
.search {
  padding: 20px 7.5px;
  display: flex;
}
.search-button {
  padding-left: 15px;
}

// 表格
.table-title {
  display: flex;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  background: rgba(242, 242, 242);

  .table-title-input1 {
    margin: 5px 5px;
    width: 400px;
  }
}
.table {
  margin: 20px 7.5px;
}

// 弹窗
.popup {
  background: #f2f2f2;
  height: 180px;
}
// 分页
.footer {
  padding: 0 7.5px 50px 7.5px;
}


.state-color3 {
  color: rgb(0, 89, 255);
}
</style>